<template>
  <div
    class="message-home"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor1,
      borderTop: `1px solid ${themeStyle[theme].borderColor1}`
    }"
  >
    <div
      class="message-home-title"
      :style="{
        backgroundColor: themeStyle[theme].backgroundColor2,
        color: themeStyle[theme].textColor3
      }"
    >
      <div class="title-tab">
        <div
          class="color-block"
          :style="{
            backgroundColor: themeStyle[theme].backgroundColor1,
            left: activeTab === 'prompt' ? '0px' : activeTab === 'canvas' ? '60px' : '120px'
          }"
        ></div>
        <div
          class="tab-item"
          :style="{
            color: activeTab === 'prompt' ? '#0087dc' : themeStyle[theme].textColor2
          }"
          @click="messageStore.changeTab('prompt')"
        >
          提示
        </div>
        <div
          class="tab-item"
          :style="{
            color: activeTab === 'canvas' ? '#0087dc' : themeStyle[theme].textColor2
          }"
          @click="messageStore.changeTab('canvas')"
        >
          画布
        </div>
        <div
          class="tab-item"
          :style="{
            color: activeTab === 'simControler' ? '#0087dc' : themeStyle[theme].textColor2
          }"
          @click="messageStore.changeTab('simControler')"
        >
          仿真
        </div>
      </div>
      <div class="operate-btn">
        <svg-icon
          name="funDelete"
          size="1em"
          :color="themeStyle[theme].textColor1"
          class="icon"
          title="清空当前消息框"
        ></svg-icon>
        <svg-icon
          name="funClose"
          size="0.9em"
          :color="themeStyle[theme].textColor1"
          class="icon"
          @click="closeMsgHome"
        ></svg-icon>
      </div>
    </div>

    <div style="height: 100%; width: 100%">
      <template v-if="activeTab === 'prompt'">
        <PromptContent></PromptContent>
      </template>
      <template v-if="activeTab === 'canvas'">
        <CanvasOperate></CanvasOperate>
      </template>
      <template v-if="activeTab === 'simControler'">
        <SimControler></SimControler>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { useMessageStore } from '@renderer/store/message/message'
import PromptContent from './PromptContent.vue'
import CanvasOperate from './CanvasOperate.vue'
import SimControler from './SimControler.vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const messageStore = useMessageStore()
const { activeTab } = storeToRefs(messageStore)

const closeMsgHome = () => {
  useStyleStore().resizeMessage(0)
}
</script>

<style scoped lang="scss">
.message-home {
  width: 100%;
  height: 100%;
  font-size: $font-size-small;

  .message-home-title {
    height: 25px;
    padding: 0px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-tab {
      display: flex;
      justify-content: left;
      align-items: center;
      position: relative;
      user-select: none;

      .tab-item {
        width: 60px;
        text-align: center;
        z-index: 10;
      }

      .color-block {
        position: absolute;
        width: 60px;
        height: 25px;
        top: 0px;
        left: 0px;
        transition: all 0.3s ease-in-out;
      }
    }

    .operate-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      .icon {
        width: 25px;
        cursor: pointer;
      }
    }
  }
}
</style>
